<template>
	<div class="memberPage headspace">
		<Header active="0"></Header>
		<div class="bread" style="text-align: right;">
			<div class="page-inner">
				<NuxtLink to="/">首頁</NuxtLink>><span>個人中心</span>
			</div>
		</div>
		<div class="member">
			<div class="page-inner">
				<div class="mtit f40 font-m">
					<span>个人信息修改</span>
				</div>
				<div class="mbox">
					<div class="mr">
						<div class="mform">
							<el-form ref="ruleFormRef" :model="userInfo" :rules="formRules">
								<div class="fcols flex">
									<div class="i">
										<el-form-item label="">
											<div class="line">
												<div class="lb f20 font-m">用戶名<span>*</span></div>
												<div class="lr"><el-input v-model="userInfo.username"
														placeholder="請輸入用戶名"></el-input></div>
											</div>
										</el-form-item>
									</div>
									<div class="i">
										<el-form-item label="">
											<div class="line">
												<div class="lb f20 font-m">公司<span>*</span></div>
												<div class="lr"><el-input v-model="userInfo.company"
														placeholder="請輸入公司"></el-input></div>
											</div>
										</el-form-item>
									</div>
								</div>
								<div class="fcols flex">

									<div class="i">
										<el-form-item label="">
											<div class="line">
												<div class="lb f20 font-m">國家<span>*</span></div>
												<div class="lr"><el-input v-model="userInfo.country"
														placeholder="請輸入國家"></el-input></div>
											</div>
										</el-form-item>
									</div>
									<div class="i">
										<el-form-item label="">
											<div class="line">
												<div class="lb f20 font-m">郵箱<span>*</span></div>
												<div class="lr"><el-input disabled v-model="userInfo.email"
														placeholder="請輸入郵箱"></el-input></div>
											</div>
										</el-form-item>
									</div>
								</div>
								<div class="fcols flex">

									<div class="i">
										<el-form-item label="">
											<div class="line">
												<div class="lb f20 font-m">職業</div>
												<div class="lr"><el-input v-model="userInfo.job"
														placeholder="請輸入職業"></el-input></div>
											</div>
										</el-form-item>
									</div>
									<div class="i">
										<el-form-item label="">
											<div class="line">
												<div class="lb f20 font-m">如何知道的我們?</div>
												<div class="lr"><el-input v-model="userInfo.hear_about"></el-input>
												</div>
											</div>
										</el-form-item>
									</div>
									<!-- <div class="i">
                                        <el-form-item prop="code">
                                            <div class="line">
                                                <div class="lb f20 font-m">驗證碼<span>*</span></div>
                                                <div class="lr">
                                                    <el-input v-model="userInfo.code"
                                                        placeholder="請輸入驗證碼">
                                                        <template #append>
                                                            <div class="getbtn">
                                                                <div v-if="showText" class="t-c" @click="toGetCode()">
                                                                    獲取驗證碼</div>
                                                                <div v-else class="t-c gray" style="color: #a7a7a7">{{second }}秒後可重新發送</div>
                                                            </div>
                                                        </template>
                                                    </el-input>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </div> -->
								</div>
								<div class="fcols flex">
									<div class="i">
										<div class="line" v-if="userInfo.wechat_bind" @click="toUnBind">
											<div class="lb f20 font-m">綁定協力廠商帳號（已綁定）</div>
											<div class="lr">
												<el-input v-model="userInfo.wechat_bind.openname" disabled></el-input>
												<div class="wxbind flex">
													<div class="ico"><img src="/images/wechat.svg" alt=""></div>
													<div class="span">解除绑定</div>
												</div>
											</div>
										</div>
									</div>

									<div class="i">
										<el-form-item label="">
											<div class="line">
												<div class="lb f20 font-m">其他请具体说明</div>
												<div class="lr"><el-input v-model="userInfo.others"></el-input></div>
											</div>
										</el-form-item>
									</div>
								</div>
								<!-- <div class="fcols flex"> -->

								<!-- 綁定協力廠商帳號（已綁定） -->

								<!-- </div> -->
								<div class="fcols">
									<el-form-item label="">
										<div class="line">
											<div class="lb f20 font-m">公司驗證</div>
											<div class="lr">
												<div class="gbtn flex" @click="dialogShow=true;" v-if="userInfo.level=='0'">
													<div class="add_w f32"><i class="iconfont icon-plus"></i></div>
													<p>點擊驗證</p>
												</div>
												<div class="gbtn flex" v-if="userInfo.level=='1'">
													<p>{{userInfo.company}} 待認證中</p>
												</div>
												<template v-if="userInfo.level=='2'">
													<div class="gbtn f18" @click="dialogShow = true;" v-if="!userInfo.license">
														<div class="add_w f32"><i class="iconfont icon-plus"></i></div>
														<p>重新驗證</p>
													</div>
													<div class="gbtn" v-else>
														<div class="img_box">
															<el-image :src="userInfo.license" :preview-src-list="[userInfo.license]"
															fit="cover" />
															<div class="close" @click="userInfo.license=''">×</div>
														</div>
													</div>
												</template>
												<div class="gbtn flex" v-if="userInfo.level=='3'" @click="dialogShow=true;">
													<p>{{userInfo.company}} 驗證失敗，點擊编輯重新認證</p>
												</div>
												
											</div>
										</div>
									</el-form-item>
								</div>
								<div class="btns flex f18">
									<div class="btn" @click="back">取消</div>
									<div class="btn on" @click="save">保存</div>
								</div>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div  v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在提交..."></div>
	<!-- 弹出框 -->
	<el-dialog v-model="dialogShow" class="mindailog">
		<el-form v-model="dialogForm">
			<el-form-item>
				<p class="fit font-m f16">公司名稱</p>
				<el-input v-model="userInfo.company" placeholder="請輸入公司名稱" style="height: 75%" />
			</el-form-item>
			<el-form-item>
				<p class="fit font-m f16">職位</p>
				<el-input v-model="userInfo.position" placeholder="請輸入職位" style="height: 75%" />
			</el-form-item>
			<el-form-item>
				<p class="fit font-m f16">
					公司驗證

				</p>
				<div class="license_upload">
					<el-upload ref="upload" class="upload-demo" action="http://h9.gzwhir.com:1999/api/user/uploadimage"
						:limit="1" :on-success="handleSuccess" :auto-upload="true">
						<template #trigger>
							<div class="uploadTxt">
								<div class="add_w">+</div>
								<p>上傳營業執照</p>
							</div>
						</template>
					</el-upload>
				</div>
			</el-form-item>
			<el-form-item>
				<div class="form_btn f18 font-m confirm_btn" @click="submit">
					確認
				</div>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>
<script>
	import {
		ElMessage,
		ElMessageBox
	} from "element-plus";
	import {
		emsSend,
		userInfo,
		userEdit,
		weChatUnbind
	} from "@/api/sections";
	export default {
		async setup() {

		},
		data() {
			return {
				dialogShow: false,
				dialogForm: {},
				second: 120,
				token: '',
				showText: true, //判断短信是否发送
				userInfo: {},
				fullscreenLoading:false,
				formRules: {
					firstName: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					lastName: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					email: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					company: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					Country: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					job: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					license: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
				},
				srcList: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']
			};
		},
		methods: {
			toUnBind() {

				ElMessageBox.confirm('確定解除微信綁定嗎?', '提示', {
					confirmButtonText: '確定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					
					
					weChatUnbind({token:this.token}).then((res) => {
					
						if (res.code == 1) {} else {
							ElMessage({
								message: res.msg,
								type: "error",
							});
						}
					});
				})
			},
			save() {
				var that = this;
				that.userInfo.token = that.token;
				that.fullscreenLoading=true;
				userEdit(that.userInfo).then((res) => {
					that.fullscreenLoading=false;
					if (res.code == 1) {
						localStorage.setItem(
							"userinfo",
							JSON.stringify(that.userInfo)
						);
						that.$router.push('/member');
						ElMessage({
							message: '修改成功!',
							type: "success",
						});
					} else {
						ElMessage({
							message: res.msg,
							type: "error",
						});
					}
				});

			},
			back() {
				this.$router.push('/member');
			},
			toGetCode() {
				emsSend({
					email: this.userInfo.email,
					event: "register",
				}).then((res) => {
					if (res.code == 1) {
						ElMessage({
							message: res.msg,
							type: "success",
						});

						var interval = setInterval(() => {
							this.showText = false;
							var times = this.second - 1;
							this.second = times;
						}, 1000);
						setTimeout(() => {
							clearInterval(interval);
							this.second = 60;
							this.showText = true;
						}, 60000);
					} else {
						ElMessage({
							message: res.msg,
							type: "error",
						});
					}
				});
			},
			handleAvatarSuccess(res) {
				if (res.code == 1) {
					this.userInfo.avatar = res.data.fullurl;
				}
			},
			handleSuccess(res) {
				if (res.code == 1) {
					this.userInfo.license = res.data.fullurl;
				}
			},
			getUser() {
				if (localStorage.getItem("userinfo")) {
					this.token = JSON.parse(localStorage.getItem("userinfo")).token;
				}
				userInfo({
					token: this.token,
				}).then((res) => {
					this.userInfo = res.data.userinfo
				});
			},
			submit() {
				var that = this;
				that.dialogShow = false;
			}
		},
		beforeRouteEnter(to, form, next) {
			next((vm) => {
				vm.pageFrom = form.path;
				console.log(vm.pageFrom, 1231313);
			});
		},
		mounted: function() {
			this.getUser()
		}
	};
</script>
<style scoped>	
.member .mtit {text-align: center;margin-bottom: 5%;}
.member .mtit span {display: inline-block;border-bottom: 1px solid #f4e5e7;line-height: 1;padding-bottom: 40px;position: relative;}
.member {padding: 5% 0;border-top: 1px solid #e8e8e8;}
.member .mtit span:after {content: "";position: absolute;left: 50%;width: 2em;height: 3px;background: #c6031d;bottom: 0;margin-left: -1em;}
.member .mbox {padding: 5% 0;background: #fff;border-radius: 30px;align-items: stretch;}
.member .mbox .ml {flex: 0 0 auto;width: 400px;text-align: center;border-right: 1px solid #eee;}
.mbox .ml .avatar {width: 170px;height: 170px;margin: 0 auto 30px;border: 4px solid #eee;border-radius: 50%;overflow: hidden;}
.mbox .ml .avatar img {display: block;width: 100%;height: 100%;object-fit: cover;}
.mbox .ml .btns .btn {color: #999;border-color: #999;border-radius: 40px;}
.mbox .ml .btns .btn:hover {border-color: #4bb1b9;color: #fff;}
.mbox .ml .btns .btn:active {background: #368f96;}
.mbox .ml .btns {justify-content: center;margin-bottom: 50px;}
.mbox .ml .p {color: #999;margin-bottom: 5px;}
.mbox .ml .lv {color: #c6031d;}
.member .mbox .mr {flex: 1 1 auto;padding: 0 5%;}
.fcols .i {flex: 0 0 auto;width: 48%;}
.mform .line {width: 100%;justify-content: flex-start;}
.mform .line .lb {line-height: 1.3;margin-bottom: 10px;}
.mform .line .lb span {color: #c6031d;}
.mform .line .lr {flex: 1 1 auto;position: relative;}
.mform .line .lr .el-input {display: block;}
.mform .line .lr .el-input :deep(.el-input-group__append) {position: absolute;right: 0;top: 0;height: 100%;z-index: 5;padding: 0;}
.getbtn {height: 100%;display: flex;flex-direction: column;}
.getbtn .t-c {padding: 0 1em;cursor: pointer;flex: 1 1 auto;display: flex;align-items: center;justify-content: center;}
.getbtn .t-c.gray {cursor: default;pointer-events: none;color: #999;}
.mform .line .lr :deep(.el-input__wrapper) {display: flex;border-radius: 5px;}
:deep(.el-input__inner) {height: 48px;padding: 0 1em;}
.mform .line .lr .gbtn {padding: 30px;text-align: center;background: #f0f0f0;border-radius: 5px;justify-content: center;cursor: pointer;user-select: none;color: #666;}
.mform .line .lr .gbtn .add_w {margin-bottom: 10px;line-height: 1;}
.mform .line .lr .gbtn .add_w img {height: 20px;}
.mform .line .lr .img_box{position: relative;width: 300px;margin: 0 auto;}
.mform .line .lr .close{position: absolute;right: -25px;top: -6px;font-size: 30px;}
.mform .line .lr .close:hover{color: #368f96;}
.mform .btns {justify-content: center;margin-top: 50px;}
.mform .btns .btn {background: #c6031d;color: #fff;border-color: #c6031d;border-radius: 2em;min-width: 10em;}
.mform .btns .btn:active {background: #a50117;border-color: #a50117;}
.mform .btns .btn.on {background: #368f96;border-color: #368f96;}
.mform .btns .btn.on:active {background: #287e85;border-color: #287e85;}
.mform .line .confirm_btn {text-align: center;line-height: 48px;background: #4bb1b9;text-align: center;color: #fff;border-radius: 48px;user-select: none;cursor: pointer;}
.mform .line .confirm_btn:active {background: #368f96;}
.wxbind {position: absolute;right: 0;top: 0;height: 100%;cursor: pointer;padding: 0 10px;color: #368f96;}
:deep(.el-input.is-disabled .el-input__inner) {cursor: default;color: transparent;}
.wxbind .ico {flex: 0 0 auto;margin-right: 5px;}
.wxbind .ico img {display: block;width: 24px;}
.fcols .i {margin-bottom: 18px;}
.fcols .i :deep(.el-form-item) {margin-bottom: 0;}
@media(max-width:1024px) {
.member .mbox {display: block;}
.member .mbox .ml {width: auto;margin-bottom: 30px;}
.fcols.flex {display: block;}
.fcols .i {width: auto;}}
@media(max-width:540px) {
.member .mbox {border-radius: 12px;padding: 30px 20px;}
.mbox .ml .avatar {width: 80px;height: 80px;margin-bottom: 20px;}
.mbox .ml .btns {margin-bottom: 20px;}
.mform .line {display: block;}
.mform .line .lb {width: auto;text-align: left;margin-bottom: 5px;}
.member .mbox .mr {padding: 0}}
</style>